<template>
  <div>
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%; overflow-y: auto;"
    >
      <el-table-column v-for='(item,index) in column' :key='index' :prop="item.prop" :label="item.label" :min-width='item.minWidth' ></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'
defineProps({
  tableData: null,
  column: null
})
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val) => {
}
// 当前页
const handleCurrentChange = (val) => {
}
</script>

<style  lang='scss'>
@import '~@/styles/variables.module.scss';
.el-input__wrapper{
  border: 1px solid $menuText !important;
}
.el-scrollbar__wrap{
  height: 400px !important;
}
.el-scrollbar__bar.is-vertical{
  width: 10px !important;
}
.el-scrollbar__bar.is-horizontal{
  height: 10px !important;
}
</style>
